<template>
  <div class="section_common">
    <div class="main">
      <el-form ref="form" label-width="100px">
        <el-form-item label="所属仓库" required>
          <!--<el-radio v-model="area" label="1">东莞仓</el-radio>
          <el-radio v-model="area" label="2">上雪仓</el-radio>-->
          <el-select v-model="area" size="mini" placeholder="请选择" v-on:change="selAttribution">
            <el-option label="上雪仓" value="2"></el-option>
            <el-option label="东莞仓" value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="领用类型" required>
          <el-radio v-model="classification" label="公共">公共</el-radio>
          <el-radio v-model="classification" label="个人">个人</el-radio>
        </el-form-item>


        <el-form-item label="物品归属地" required><!--multiple-->
          <el-select v-model="attribution" :filterable="true" size="mini" placeholder="请选择" @change="onConfirmAtt">
            <el-option v-for="(item,index) in columnsAtt" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item label="物品归属地" required>
          <el-input v-model="attribution" size="mini" readonly v-on:focus="showPAtt"></el-input>
          <van-popup v-model="showPickerAtt" position="bottom">
            <van-picker
                    show-toolbar
                    :columns="columnsAtt"
                    @confirm="onConfirmAtt"
                    @cancel="showPickerAtt = false"
            />
          </van-popup>
        </el-form-item>-->


        <el-form-item label="部门/组别" required><!--multiple-->
          <el-select v-model="dept" :filterable="true" size="mini" placeholder="请选择">
            <el-option v-for="(item,index) in columnsDep" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <!--<el-form-item label="部门/组别" required>
          <el-input v-model="dept" size="mini" @focus="showPickerDep = true" readonly></el-input>
          <van-popup v-model="showPickerDep" position="bottom">
            <van-picker
                    show-toolbar
                    :columns="columnsDep"
                    @confirm="onConfirmDep"
                    @cancel="showPickerDep = false"
            />
          </van-popup>
        </el-form-item>-->
        <p>需领用的物品</p>


        <!--<el-form-item label="物品名称" required>&lt;!&ndash;multiple&ndash;&gt;
          <el-select v-model="pname" :filterable="true" size="mini" placeholder="请选择">
            <el-option v-for="(item,index) in columns" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item label="物品名称" required>
          <!--<el-input v-model="pname" size="mini" @focus="showPicker = true" readonly></el-input>-->
          <el-cascader v-model="pname" size="mini" :options="columns" @change="onConfirm">
            <!--<van-picker
                    show-toolbar
                    :columns="columns"
                    @confirm="onConfirm"
                    @cancel="showPicker = false"
            />-->
          </el-cascader>
        </el-form-item>

        <el-form-item label="物品分类" required>
          <el-radio v-model="type" label="办公用品">办公用品</el-radio>
          <el-radio v-model="type" label="固定资产">固定资产</el-radio>
        </el-form-item>

        <el-form-item label="物品规格" required>
          <el-input v-model="specification" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="数量" required>
          <el-input v-model="number" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="领用原因">
          <el-input v-model="sqreason" size="mini"></el-input>
        </el-form-item>

        <van-steps direction="vertical" :active="active" active-icon="checked" active-color="#38f">
          <!--<p style="font-size:16px;font-weight: 900;margin-bottom: -10px;">审批人</p>-->
          <van-step v-show="oneShow">
            <!--<p style="font-size:16px;font-weight: 900">组长</p>-->
            <van-image v-for="(item,index) in oneLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
              <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
            </van-image>
          </van-step>
          <van-step v-show="twoShow">
            <!--<p style="font-size:16px;font-weight: 900">主管</p>-->
            <van-image v-for="(item,index) in twoLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
              <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
            </van-image>
          </van-step>
          <van-step v-show="threeShow">
            <!--<p style="font-size:16px;font-weight: 900">指定审批人</p>-->
            <van-image v-for="(item,index) in threeLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
              <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
            </van-image>
            <van-step v-show="fourShow">
              <van-image v-for="(item,index) in fourLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>
          </van-step>


        </van-steps>

        <el-form-item>
          <el-button type="primary" size="mini" @click="submitPost"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import {Image as VanImage,Toast, Calendar,Form ,Picker,Popup} from "vant";
  Vue.use(Calendar);
  Vue.use(Form);
  Vue.use(Picker);
  Vue.use(Popup);
  Vue.use(VanImage);
export default {
  data() {
    return {
      area:"",
      type:"",
      classification:"公共",
      attribution:"",//物品归属地
      dept:"",
      pname:"",
      number:"",
      specification:"",
      sqreason:"",

      columns:[],//可选择的物品名称
      showPicker:false,

      showPickerAtt:false,
      columnsAtt:[],
      showPickerDep:false,
      columnsDep:[],

      nowUser:"",
      title: "仓库--物品领用",

      addReceiveApply: '/mobiles/addReceiveApply',
      active:"-1",//步骤索引,从0开始
      oneShow:false,//审批是否显示
      oneLd:[],
      twoShow:false,
      twoLd:[],
      threeShow:false,
      threeLd:[],
      fourShow:false,
      fourLd:[],

    };
  },
  created() {
    this.nowUser=JSON.parse(localStorage.getItem('userInfo')).userId;
    this.getLd();
  },

  methods: {
    getLd(){
      this.$https.post('/mobiles/getSpld',{
        nowUser:this.nowUser,
      }).then((res)=>{
        if (res.data.data.ld1.length>0){
          this.oneShow=true;
          this.oneLd=res.data.data.ld1;
        }
        if (res.data.data.ld2.length>0){
          this.twoShow=true;
          this.twoLd=res.data.data.ld2;
        }
        if (res.data.data.ld3.length>0){
          this.threeShow=true;
          this.threeLd=res.data.data.ld3;
        }
        if (res.data.data.ld4.length>0){
          this.fourShow=true;
          this.fourLd=res.data.data.ckly4;
        }
      }).catch(err => {
        console.log(err);
      })
    },

    showPAtt(){
      this.showPickerAtt=true;
    },
    //格式化物品归宿地
    formatLacation(data,curr,foo,id){
      if(data){
        console.log(foo)
        for(let i=0;i<data.length;i++){
          console.log(data[i])
          curr.push({
            label:data[i][foo],
            value:data[i][id],
          })
        }
      console.log(curr)
      }
    },
    //选择仓库
    selAttribution(){
      //console.log("改变会输出")
      //初始化选择物品归属地和物品名称
      this.$https.post('/mobiles/selAttribution', {
        area:this.area,
      }).then(res => {
        /*for (var i = 0; i < res.data.data.areadepts.length; i++) {
            var attribution = res.data.data.areadepts[i].attribution;
            document.getElementById("attribution").append('<option value="' + attribution + '">' + attribution + '</option>');
        }*/
        // this.columnsAtt.push(res.data.data.areadepts);
        this.formatLacation(res.data.data.areadepts,this.columnsAtt,'attribution','attribution');
        /*for (var i = 0; i < res.data.data.summaries.length; i++) {
            this.columns.push(res.data.data.summaries[i].pname);
        }*/
        this.columns=res.data.data.summaries;
        //this.formatLacation(res.data.data.summaries,this.columns,'text','text');

      }).catch(err => {
        console.log(err)
      });
    },

    onConfirm(value) {//确认选中物品
      this.pname = value[0];
      this.type=value[1];
      this.specification=value[2];
      this.showPicker = false;
    },
    onConfirmAtt(value) {//确认选中归属地
      this.attribution = value;
      this.showPickerAtt = false;

      //同时触发渲染所属组别数据
      this.$https.post('/mobiles/selDeptByAreaAndAtt', {
        area:this.area,
        attribution:this.attribution,
      }).then(res => {
        this.formatLacation(res.data.data.areadepts,this.columnsDep,'dept','dept');
        /*for (var i = 0; i < res.data.data.areadepts.length; i++) {
          this.columnsDep.push(res.data.data.areadepts[i].dept);
        }*/

      }).catch(err => {
        console.log(err)
      });
    },

    onConfirmDep(value) {//确认选中物品
      this.dept = value;
      this.showPickerDep = false;
    },



    // 返回
    goBack() {
      this.$router.go(-1);
    },
    // 提交
    submitPost() {
      if (!this.isNull()) return false;

      this.$https.post(this.addReceiveApply, {
        nowUser:this.nowUser,
        area:this.area,
        classification:this.classification,
        attribution:this.attribution,
        type:this.type,
        dept:this.dept,
        pname:this.pname,
        number: this.number,
        specification:this.specification,
        sqreason:this.sqreason,

      }).then(res => {
        res;
        Toast("申请成功");
        this.$router.go(-1);
      }).catch(err => {
        console.log(err)
      });
    },
    //判断相关数据是否为空
    isNull() {
      if (this.area == '') {
        this.$toast("请选择仓库");
        return false;
      }
      if (this.type=='') {
        this.$toast("请选择分类");
        return false;
      }
      if (this.classification=='') {
        this.$toast("请选择报废类型");
        return false;
      }
      if (this.attribution=='') {
        this.$toast("请选择物品归属地");
        return false;
      }
      if (this.dept=='') {
        this.$toast("部门/区域不能为空");
        return false;
      }
      if (this.pname=='') {
        this.$toast("物品名称不能为空");
        return false;
      }
      if (this.specification=='') {
        this.$toast("物品规格不能为空");
        return false;
      }
      if (this.number=='') {
        this.$toast("数量不能为空");
        return false;
      }
      return true;
    },

  },
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  justify-items: center;
  margin: 0 auto;
  .el-form {
    padding-right: 10px;
    .el-form-item {
      .el-form-item__label {
        line-height: 16px;
      }
      margin-bottom: 5px;
    }
  }
}
</style>